import React from "react";
import {Link} from "react-router-dom"
import PageTitle from "../../../component/main_title/main_title"
import {BaseReq} from "../../../utils/baseReq"
import Upload from "../../../component/upload/upload"
import axios from "axios"
const baseReq=new BaseReq()
class Save extends React.Component{
    constructor(props){
        super(props)
        
        // console.log("id",this.props.match.params.productId)
        // console.log("where",this.props.location.query.fromWhere)
        // console.log("where",this.props.location.query.productId)
    
        
        this.state={
          productShowList:["普通商品","轮播图片","热销商品","新品"],
          productStatusList:["上架","下架"],
          productOptionList:["夹克","卫衣","鞋子","短袖","长裤","背包","棉衣","羽绒服","风衣"],
          productId:this.props.match.params.productId ||this.props.location.query.productId ||"",
          show:"普通商品",
          status:"上架",
          category:"夹克",
        }
    }
    componentDidMount(){
      if(this.state.productId){
        this.getProductDetail()
      }
      if(this.props.location){
        let that=this
        // console.log("where11",this.props.location.query.productId)
        this.getProductDetail()
      }
      
      
    }
    
    //获取下标
    getIndex(item,arr){
      return arr.indexOf(item)
    }
    //输入框变化时获取内容
    onInputChange(e){
      this.setState({
        [e.target.name]:e.target.value,
      })
    }
    onSelectChange(e){
      this.setState({
        [e.target.name]:e.target.value
      })
    }
    //选择图片
    onImageChange(e){
      this.setState({
        [e.target.name]:e.target.value
      })
    }
    //点击提交
    addProduct(){
      // let productShow=this.getIndex(this.state.show,this.state.productShowList)
      // let productStatus=this.getIndex(this.state.status,this.state.productStatusList)
      // let categoryType=this.getIndex(this.state.category,this.state.productOptionList)+1
      // "productName": "贝壳头",        "productPrice": 699,        "productStock": 110,        "productDescription": "三叶草",   
      let productStr={
        productShow:this.getIndex(this.state.show,this.state.productShowList),
        productStatus:this.getIndex(this.state.status,this.state.productStatusList),
        categoryType:this.getIndex(this.state.category,this.state.productOptionList)+1,
        productName:this.state.name,
        productPrice:this.state.price,
        productStock:this.state.stock,
        productDescription:this.state.descript
      }
      // let thumbnail=this.state.mainImage[0].thumbUrl
      // let productImg0=this.state.detailImage[0].thumbUrl
      var formData = new FormData()
    
    formData.append('thumbnail', this.state.mainImage);
    // formData.append('productImg0',this.state.detailImage);
    let num=0
    for(let i=0;i<this.state.detailImageList.length;i++){
      
      formData.append('productImg'+num,this.state.detailImageList[i])
      num++
    }
    formData.append("productStr",JSON.stringify(productStr))
      let userinfo=JSON.parse(window.localStorage.getItem("userInfo"))
      let parmas={
        data: formData,
        type:"post",
        headers:{"Content-Type":"application/x-www-form-urlencoded",
                  "token":userinfo
      },
        url: this.props.match.params ? "/product/upload?product_id="+this.state.productId : "/product/upload"
      }
      baseReq._axios(parmas,res=>{
        if(res.data.success==true){
          alert("更新商品成功")
        }
      })
      
    }
    //通过id去加载商品信息
    getProductDetail(){
      console.log(this.state.productId)
      axios.get("/product/product_info/detail?product_id="+this.state.productId).then(res=>{
        this.setState({
    //       "productId": "1535901691115694782",
    // "productName": "CE1003 CE1005 CD6235",
    // "productPrice": 599,
    // "productStock": 95,
    // "productDescription": "Adidas三叶草代购 杨幂同款",
    // "productIcon": "/1535901691115694782/7038bd2d-1872-4fa1-83f6-fbf1b45d2090.jpg",
    // "productStatus": 0,
    // "productShow": 1,
    // "categoryType": 1,
          name:res.data.data.productName,
          price:res.data.data.productPrice,
          stock:res.data.data.productStock,
          descript:res.data.data.productDescription,
          show:this.state.productShowList[res.data.data.productShow],
          status:this.state.productStatusList[res.data.data.productStatus],
          category:this.state.productOptionList[res.data.data.categoryType-1],
          imageUrl:res.data.data.productIcon

        })
      },error=>{
        console.log(error)
      })

    }
    getMainImage(mainImage){
      
      
      this.setState({
        mainImage
      })
    }
    getDetailImage(detailImage){
      console.log(detailImage)
      let detailImageList=[]
      detailImageList.push(detailImage)
      this.setState({
        detailImageList
      })
    }
    
    render(){
        return(
            
            <div id="page-wrapper">
                <PageTitle title="添加商品" />
                <div className="row">
                <form className="form-horizontal">
                <div className="form-group">
                  <label  className="col-sm-2 control-label">商品名称</label>
                  <div className="col-sm-6">
                    <input value={this.state.name}  className="form-control" name="name"
                    readOnly={this.props.location.query ? "readOnly" : ""} placeholder="商品名称" 
                            onChange={this.onInputChange.bind(this)}
                    />
                  </div>
                </div>
                <div className="form-group">
                  <label  className="col-sm-2 control-label">商品价格</label>
                  <div className="col-sm-6">
                  <div className="input-group">
                  <input value={this.state.price} type="number" name="name" 
                          readOnly={this.props.location.query ? "readOnly" : ""}  className="form-control"  placeholder="商品价格" 
                  onChange={(e)=>{this.onInputChange(e)}}/>
                  <span className="input-group-addon" id="basic-addon2">元</span>
                  </div>
                  </div>
                </div>
                <div className="form-group">
                  <label  className="col-sm-2 control-label">商品库存</label>
                  <div className="col-sm-6">
                  <div className="input-group">
                  <input value={this.state.stock} type="number" name="stock"
                  readOnly={this.props.location.query ? "readOnly" : ""} className="form-control"  placeholder="商品库存" 
                  onChange={(e)=>{this.onInputChange(e)}}/>
                  <span className="input-group-addon" id="basic-addon2">件</span>
                  </div>
                  </div>
                </div>
                <div className="form-group">
                  <label  className="col-sm-2 control-label">商品描述</label>
                  <div className="col-sm-6">
                    <input value={this.state.descript}  className="form-control"
                    readOnly={this.props.location.query ? "readOnly" : ""} name="descript" placeholder="商品描述" 
                    onChange={(e)=>{this.onInputChange(e)}} />
                  </div>
                </div>
                <div className="form-group">
                  <label  className="col-sm-2 control-label">商品展示位置</label>
                  <div className="col-sm-6">
                    <select value={this.state.show} name="show" className="form-control"
                    disabled={this.props.location.query ? "disabled" : ""} onChange={this.onSelectChange.bind(this)}>
                      {
                        this.state.productShowList.map((item,index)=>{
                       return (<option key={index} data-id={index} >{item}</option>) 
                      })}
                    </select>
                  </div>
                </div>
                <div className="form-group">
                  <label  className="col-sm-2 control-label">商品状态</label>
                  <div className="col-sm-6">
                    <select value={this.state.status} name="status" className="form-control" 
                    disabled={this.props.location.query ? "disabled" : ""} onChange={(e)=>{this.onSelectChange(e)}}>
                      {this.state.productStatusList.map((item,index)=>{
                        return <option key={index}>{item}</option>
                      })}
                    </select>
                  </div>
                </div>
                <div className="form-group">
                  <label  className="col-sm-2 control-label">商品所属分类</label>
                  <div className="col-sm-6">
                    <select value={this.state.category} className="form-control" name="category"
                    disabled={this.props.location.query ? "disabled" : ""} onChange={(e)=>{this.onSelectChange(e)}}>
                      {this.state.productOptionList.map((item,index)=>{
                        return <option key={index}>{item}</option>
                      })}
                    </select>
                  </div>
                </div>
                <div className="form-group">
                  <label  className="col-sm-2 control-label">商品图片</label>
                  {
                    this.props.match.params.productId || this.props.location.query.fromWhere ? 
                    (<div className="col-sm-6">
                      <img src={baseReq.imgUrl+this.state.imageUrl} alt="..." className="img-thumbnail"></img>
                      <div className="form-group">
                        <label >展示图片</label>
                        <Upload  getMainImage={this.getMainImage.bind(this)}/>
                    </div>
                    <div className="form-group">
                        <label >详细图片</label>
                        <Upload text="limit" getDetailImage={this.getDetailImage.bind(this)}/>
                    </div>
                    </div>)   
                    :
                    (<div className="col-sm-6">
                 
                    <div className="form-group">
                        <label >展示图片</label>
                        <Upload />
                    </div>
                    <div className="form-group">
                        <label >详细图片</label>
                        <Upload text="limit" />
                    </div>
                  </div>)}
                </div>
                
                <div className="form-group">
                  <div className="col-sm-offset-2 col-sm-10">
                    {
                      this.props.match.params.productId ?
                      <button type="button" className="btn btn-primary" onClick={this.addProduct.bind(this)} >添加</button>
                      :null
                    }
                      
                      </div>
                </div>
              </form>
                </div>
                
            </div>
        )
    }
}
export default Save